<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="${pageContext.request.contextPath}/">
		<meta charset="UTF-8">
		        <link rel="shortcut icon" href="favicon.ico"> <link href="resource/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="resource/admin/css/font-awesome.css?v=4.4.0" rel="stylesheet">

        <link href="resource/admin/css/animate.css" rel="stylesheet">
        <link href="resource/admin/css/style.css?v=4.1.0" rel="stylesheet">

    </head>

<body class="gray-bg">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>周报展示</h5>
                        <!--<div class="ibox-tools">
                            <a href="projects.html" class="btn btn-primary btn-xs">创建新项目</a>
                        </div>-->
                    </div>
                    <div class="ibox-content">
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-md-2">
                                <button type="button" id="user-add-btn" class="btn btn-primary btn-sm"><i class="fa fa-user-plus"></i> 新建</button>
                                <button type="button" id="user-loading-btn" class="btn btn-white btn-sm"><i class="fa fa-refresh"></i> 刷新</button>
                            </div>
                            <!-- action还是提交的是sys/user/find的路径，给Pager对象传递数据 -->
                            <form action="sys/user/find" method="get" id="searchForm">
                            <div class="col-md-2 col-md-offset-4">
                                <select class="input-sm form-control input-s-sm inline" style="font-size: 12px;"
                                name="query['role_id']" id="role_id"
                                >
                                    <option value="">请选择角色</option>
                                    <c:forEach items="${requestScope.roleList }" var="role">
                                        <option value="${role.role_id }">${role.role_name }</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <div class="input-group">
                                    <input type="text" placeholder="请输入用户的姓名" class="input-sm form-control" name="query['user_name']" value="${requestScope.pager.query.user_name }">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary" id="searchBtn"> 搜索</button>
                                    </span>
                                </div>
                            </div>
                            <!-- 隐藏域传递pageNow是Pager对象中的属性 -->
                            <input type="hidden" name="pageNow" id="pageNow" value="${pager.pageNow }">
                            <input type="hidden" id="totalPages" value="${pager.totalPages }">
                            </form>
                        </div>

                        <div class="project-list">

                            <table class="table table-hover">
                                <tbody>
                                    <c:forEach items="${requestScope.pager.datas }" var="weeklycount" varStatus="vs">
                                    <tr>
                                        <td class="client-avatar">
                                            <img alt="image" 
                                            src="attr/user/${weeklycount.photo }"
                                            onerror="this.src='resource/admin/img/a2.jpg'"
                                            style="width:28px;height:28px;">
                                        </td>
                                        <td>
                                            <!-- A标签的样式,暂时没有使用该链接 -->
                                            <a href="javascript:;" class="client-link">${user.user_name }</a>
                                        </td>
                                        <td> ${user.account}</td>
                                        <td class="contact-type">
                                            <i class="fa fa-user-secret"> </i>
                                        </td>
                                        <td> ${empty user.role.role_name?"无角色":user.role.role_name }</td>
                                        <td class="client-status">
                                            
                                        </td>
                                        <td class="contact-type">
                                            <i class="fa fa-clock-o"> </i>
                                        </td>
                                        <td><!-- 登录时间 -->
                                            <fmt:formatDate value="${user.login_time }" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </td>
                                        <td class="contact-type">
                                            <i class="fa fa-clock-o"> </i>
                                        </td>
                                        <td><!-- 登录时间 -->
                                            <fmt:formatDate value="${user.login_time }" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </td>
                                        <td class="contact-type">
                                            <i class="fa fa-clock-o"> </i>
                                        </td>
                                        <td><!-- 登录时间 -->
                                            <fmt:formatDate value="${user.login_time }" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </td>
                                        <td class="contact-type">
                                            <i class="fa fa-clock-o"> </i>
                                        </td>
                                        <td><!-- 登录时间 -->
                                            <fmt:formatDate value="${user.login_time }" pattern="yyyy-MM-dd HH:mm:ss"/>
                                        </td>
                                        <td>
                                            <a href="sys/user/update/${user.user_id }" class="btn btn-success btn-sm"><i class="fa fa-pencil"></i> 编辑 </a><!-- 占位符传递数据 -->
                                            <!-- 设置自定义数据 pk-id 用于表示注解 -->
                                            <c:if test="${sessionScope.session_user.user_id!=user.user_id }">
	                                            <c:if test="${user.status==1 }">
	                                            <a href="javascript:;" pk-id="${user.user_id }" user-status="2" class="btn btn-warning btn-sm user-status-btn"><i class="fa fa-power-off"></i> 禁用 </a>
	                                            <a href="javascript:;" pk-id="${user.user_id }" user-status="-1" class="btn btn-danger btn-sm user-status-btn"><i class="fa fa-remove"></i> 删除 </a>
                                                </c:if>
                                                <c:if test="${user.status==2 }">
                                                <a href="javascript:;" pk-id="${user.user_id }" user-status="-1" class="btn btn-warning btn-sm user-status-btn"><i class="fa fa-power-off"></i> 删除 </a>
                                                <a href="javascript:;" pk-id="${user.user_id }" user-status="1" class="btn btn-danger btn-sm user-status-btn"><i class="fa fa-remove"></i> 激活 </a>
                                                </c:if>
                                                <c:if test="${user.status==-1 }">
                                                <a href="javascript:;" pk-id="${user.user_id }" user-status="1" class="btn btn-warning btn-sm user-status-btn"><i class="fa fa-power-off"></i> 恢复 </a>
                                                </c:if>
                                            </c:if>
                                            
                                            
                                            <a href="javascript:;" pk-id="${user.user_id }" class="btn btn-white btn-sm user-photo-btn"><i class="fa fa-file-photo-o"></i> 头像 </a>
                                        </td>
                                    </tr>
                                    </c:forEach>
                                </tbody>
                            </table>
                        </div>
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-md-2">
                                <span style="line-height: 30px;">显示 ${pager.pageNow } / ${pager.totalPages } 页，共 ${pager.totalCount } 项</span>
                            </div>
                            <div class="col-md-5 col-md-offset-5">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-sm btn-white" id="first"> 首页</button>
                                    <button type="button" class="btn btn-sm btn-white" id="prev"> 上一页</button>
                                    <button type="button" class="btn btn-sm btn-white" id="next"> 下一页</button>
                                    <button type="button" class="btn btn-sm btn-white" id="last"> 尾页</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 全局js -->
        <script src="resource/admin/js/jquery.min.js?v=2.1.4"></script>
        <script src="resource/admin/js/bootstrap.min.js?v=3.3.6"></script>
        <script src="resource/admin/js/plugins/layer/layer.min.js"></script>
        <script type="text/javascript">
        $(function() {
        	var pageNow = $("#pageNow").val();
        	var totalPages = $("#totalPages").val();
        	$("#first").click(function(){
        		$("#pageNow").val(1);
        		$("#searchForm").submit();
        	});
        	
			$("#prev").click(function(){
				if (pageNow==1) {
					layer.msg("没有上一页了");
					return false;
				}
			    $("#pageNow").val(pageNow-1);
			    $("#searchForm").submit();
			});
			
			$("#next").click(function(){
                if (pageNow==totalPages) {
                    layer.msg("没有下一页了");
                    return false;
                }
                $("#pageNow").val(parseInt(pageNow)+1);
                $("#searchForm").submit();
            });
			
			$("#last").click(function(){
				$("#pageNow").val(totalPages);
                $("#searchForm").submit();
			});
			
			$("#searchBtn").click(function(){
                $("#pageNow").val(1);
                $("#searchForm").submit();
            });
        });
        
        </script>
        <script type="text/javascript">
        $(function(){
        	//$("#role_id").val();
        	var role_id = "${requestScope.pager.query.role_id}";
        	$("#role_id").val(role_id);
        	//alert("==="+$("#role_id").val()+"===")
        });
        </script>

        <!-- 自定义js -->
        <script src="resource/admin/js/content.js?v=1.0.0"></script>


        <script>
            $(document).ready(function(){
                $('#user-loading-btn').click(function () {
                    simpleLoad($(this), true)
                });

                $("#user-add-btn").click(function () {
                    window.location.href="sys/user/add";
                });
                //类选择器
                $(".user-status-btn").click(function () {
                    //获取两个自定义属性
                    var user_id = $(this).attr("pk-id");
                    var user_status = $(this).attr("user-status");
                    console.log("用户主键:"+user_id+",用户状态:"+user_status);

                    var textArray=[]
                    textArray[-1] = "删除";
                    textArray[1] = "启用";
                    textArray[2] = "禁用";

                    layer.confirm('您确定要[<span style="font-size:16px;font-weight:bold;">'+textArray[user_status]+'</span>]操作吗？', {
                        skin: 'layui-layer-molv', //样式类名
                        btn: ['确定继续','取消'], //按钮
                        shade: 0.01, //显示遮罩
                        shift:6
                    }, function(){

                        //需要发送ajax请求//:前面的是类中的属性
                        $.get("sys/user/status/update",{user_id:user_id,status:user_status},function (data) {
                           if(data.flag=="success"){
                               window.location.reload();//刷新当前页面
                               return false;
                           }else{
                               layer.msg(data.message);
                               return false;
                           }
                        },"json")
                    }, function(){});

                });

                $(".user-photo-btn").click(function () {
                    var user_id = $(this).attr("pk-id");
                    layer.open({
                        title:"系统用户头像",
                        type: 2,
                        area: ['350px', '400px'],
                        fixed: false, //不固定
                        shade: 0.01,
                        content: 'sys/user/photo/'+user_id//GET请求，占位符传递数据
                    });
                });
            });

            function simpleLoad(btn, state) {
                if (state) {
                    btn.children().addClass('fa-spin');
                    btn.contents().last().replaceWith(" Loading");
                    window.location.reload();
                } else {
                    setTimeout(function () {
                        btn.children().removeClass('fa-spin');
                        btn.contents().last().replaceWith(" Refresh");
                        window.location.reload();
                    }, 2000);
                }
            }
        </script>


    </body>
</html>